<template>
	<!-- 首页 -->
  <div class="stu" style="position: relative;">
    <div class="swipbox">
<!--		<div class="swiper-container">-->
<!--		    <div class="swiper-wrapper">-->
<!--		        <div class="swiper-slide" v-for="i in imgage"><img  :src="i" alt=""></div>-->
<!--		    </div>-->
<!--		    &lt;!&ndash; 如果需要分页器 &ndash;&gt;-->
<!--		    <div class="swiper-pagination" style="position: absolute;bottom:10px;left: 0;z-index:999;"></div>-->
<!--		</div>-->
        <el-carousel indicator-position="outside" height="800px" trigger="hover" arrow="never">
            <el-carousel-item v-for="(item,index) in imgage" :key="index">
                <img style="width: 100%;height:100%" :src="$store.state.urlss+`/image/`+item" alt="">
            </el-carousel-item>
        </el-carousel>
	</div>

	<div style="width:1100px;height:230px;text-align: center;padding-top:70px;margin: 0 auto;">
		<p style="font-size:30px;color:#333333;line-height:40px;">AGV小车，方便你我他</p>
		<p style="font-size:14px;color:#666666;line-height:60px;">高亿科技有限公司是由上海铧魅智能科技有限公司与高超集团在江西共同投资合作</p>
	</div>
	
	<div style="width:1100px;height:194px;margin: 0 auto;">
		<img src="../../assets/img/tup.jpg" alt="">
	</div>
	
	<div style="width: 1100px;height:360px;margin:2px auto;">
		<div class="tadd">
			<div class="tabdda">
<!--				<div class="zuos" id="zuo"><img @click="next(1)" src="../../assets/img/zuo.png" alt=""></div>-->
<!--				<div class="zuos" id='you'><img @click="next(0)" src="../../assets/img/you.png" alt=""></div>-->
				<div class="da" id="table-responsive">
					<img class="tadch" v-for="i in 10" src="http://image.fast.126net.cn/group1/M00/04/DD/wKgADFybS9aANwB6AABeYK2Fi_Y176.jpg" alt="">
				</div>
			</div>
		</div>
	</div>
	
	<div style="width:100%;height:950px;background: #F7F7F7;padding-top:30px;">
		<div style="text-align:center;">
			<p style="font-size:24px;color:#333333;line-height:31px;">案例展示</p>
			<p style="font-size:14px;color:#999999;line-height:40px;">CASES</p>
		</div>
		<div class="xiangf">
			<!-- @mousemove鼠标移入事件 @mouseleave鼠标移出事件 -->
		   <div class="fadd" :style="{border:zshow==index?'solid 1px #000000':'none'}" v-for="(i,index) in $store.state.albox" @mousemove='zshow=index' @mouseleave='zshow="i"'>
			 <div class="xiangs">
				<video :src="$store.state.urlss+'/agv_video/'+i.url" controls style="background:#000000"></video>
				<p>{{i.title}}</p>
			</div>
			<!-- <div class="xiangs baba" v-show="zshow==index"></div> -->
		   </div>
		</div>
		<div class="btns">+MORE</div>
	</div>
	
	<div class="rt">
		<img class="tadf" src="../../assets/logo_20201229095803.png" alt="">
		<div class="tetxbox">
			<p>高亿科技有限公司是由上海铧魅智能科技有限公司与高超集团在江西共同投资合作。公司拥有强大的科研攻关能力强，科研团队24人，硕士毕业的工程师4名、本科工程师8名、大专工程师12名，从软硬件到机械设备都能一条龙服务。</p>
			<p>建设地点：项目拟设立在抚州高新技术产业开发区（下称抚州高新区）数字经济产业园区，该区有着相对于抚州其他各区不同的有利条件。</p>
		    <p>经营范围：AGV自动引导系统、物流及输送系统、智慧校园、智慧医院、智慧园区、智慧社区、仓储系统、立体库以及各种非标自动化设备等。</p>
			<div class="btnd">了解更多</div>
		</div>
	</div>
	
	<div class="yinda">
		<div style="text-align:center;">
			<p style="font-size:24px;color:#333333;line-height:31px;">产品中心</p>
			<p style="font-size:14px;color:#999999;line-height:40px;">PRODUCTS</p>
		</div>
		<div class="boxf">
			<div class="boxfcs" v-for="(i,index) in $store.state.cpbox[0]" @click="cpzxxq(index)">
				<div style="width:100%;height: 235px;overflow:hidden;">
					<img :src="i.url1" alt="">
				</div>
				<p>{{i.title}}</p>
			</div>
		</div>
	</div>
	
	<div class="dap">
		<div style="text-align:center;">
			<p style="font-size:24px;color:#333333;line-height:31px;">项目详情</p>
			<p style="font-size:14px;color:#999999;line-height:40px;">DETAILS</p>
		</div>
		<div id="btnff">
			<div class="btnboxs" v-for="(i,index) in $store.state.xmxq.slice(0,3)" @click="xmxqc(index)">
				<img :src="i.url1" alt="">
				<div style="width:100%;padding-top:7px;">
					<p class="p1">{{i.title}}</p>
					<p class="p2">{{i.value2}}</p>
				</div>
			</div>
		</div>
	</div>
	<div style="width:1100px;height:46px;"></div>
  </div>
</template>

<script>
import Swiper from 'swiper';
import $ from 'jquery';
export default {
  name: 'stu',
  components: {},
  computed:{},
  data(){
	  return {
		  zshow:'i',
		  num:0,
		  imgage:[
			  '1.jpg',
			  '2.jpg',
			  '3.jpg',
			  // 'img/sylbt/4.jpg',
		  ]
	  }
  },
  methods:{
	      next(index){
	  		          var table = $("#table-responsive");
	  		          if (index==0) {
						  if(this.num==(10-4)){
							  this.num=0
							  var left = (table.scrollLeft() - (10*275));
							  table.animate({"scrollLeft":left},1000);
						  }else{
							this.num++
	  		                var left = (table.scrollLeft() + 275);
	  					    table.animate({"scrollLeft":left},1000);
						  }
	  		          }else if (index==1) {
						  (this.num==0)?this.num=0:this.num--;
						  if(this.num!=0){
							var left = (table.scrollLeft() - 275);
	  		                table.animate({"scrollLeft":left},1000);  
						  }
	  		          }
	  	  },
		  alzsxq(index){
		     this.$router.push({path:'/alzsxq',query:{num:index}});
		  },
		  cpzxxq(index){
		  		this.$router.push({path:'/cpzxxq',query:{num:index,index:0}});
		  },
		  xmxqc(index){
		  		 this.$router.push({path:'/xmxqc',query:{num:index}});
		  }
		  
  },
  mounted(){
      this.$store.state.indexof = 0;
	  // new Swiper ('.swiper-container', {
	  //     loop: true,
	  //
	  //             autoplay:true,
	  //
	  //             // 播放的速度
	  //
	  //             speed:1500,
	  //
	  //             // 如果需要分页器，即下面的小圆点
	  //           pagination: {
	  //                 el: '.swiper-pagination',
	  //           },
	  //     　　// 这样，即使我们滑动之后， 定时器也不会被清除
	  //     　　autoplayDisableOnInteraction : false,
	  //     	observer:true,//修改swiper自己或子元素时，自动初始化swiper
	  //     	observeParents:true//修改swiper的父元素时，自动初始化swiper
	  //   }),
	  document.body.scrollTop = document.documentElement.scrollTop = 0;
  }
}
</script>
<style scoped="scoped">
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        height: 100%;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
	.p1{
		font-size: 16px;
		color: #333333;
		line-height: 28px;
	}
	.p2{
		font-size: 14px;
		color: #999999;
		line-height: 22px;
		width: 100%;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.btnboxs img{
		height: 211px;
		width: 100%;
	}
	.btnboxs{
		width: 353px;
		height: 301px;
		text-align: left
	}
	#btnff{
		width:1100px;height:301px;margin:25px auto 0 auto;
		display:grid;
		grid-template-columns: repeat(3, 1fr); /* 相当于 1fr 1fr 1fr */
		grid-template-rows: repeat(1, 1fr); /* fr单位可以将容器分为几等份 */
		grid-gap:1.6%; /* grid-column-gap 和 grid-row-gap的简写 */
		grid-auto-flow: row;
	}
	.dap{
		width: 100%;
		height:426px;
		padding-top:30px;
	}
	.boxfcs p{
		line-height:29px;
		text-align: center;
		color: #999999;
		font-size: 14px;
	}
	.boxfcs img{
		width: 286px;
		height:236px;
	}
	.boxfcs:hover{
		-webkit-box-shadow: -1px -2px 209px -64px rgba(0,0,0,0.75);
		-moz-box-shadow: -1px -2px 209px -64px rgba(0,0,0,0.75);
		box-shadow: -1px -2px 209px -64px rgba(0,0,0,0.75);
	}
	.boxfcs{
		width: 257px;
		height: 284px;
		padding: 10px;
		border: 1px solid #ddd;
		transition:1s;
	}
	.boxf{
		width: 1149px;
		height: 609px;
		/* border: 1px solid green; */
		margin: 25px auto;
		display:grid;
		grid-template-columns: repeat(4, 1fr); /* 相当于 1fr 1fr 1fr */
		grid-template-rows: repeat(2, 1fr); /* fr单位可以将容器分为几等份 */
		grid-gap:1.6%; /* grid-column-gap 和 grid-row-gap的简写 */
		grid-auto-flow: row;
		padding:0 20px;
		overflow: hidden;
	}
	.yinda{
		width: 100%;
		height: 847px;
		background: #f7f7f7;
		padding-top: 30px;
	}
	.btnd{
		width: 154px;
		height: 56px;
		border: 2px solid #FFFFFF;
		font-size: 16px;
		text-align: center;
		line-height: 56px;
		margin-top: 50px;
	}
	.tetxbox p{
		line-height:33px;
		text-indent:30px;
	}
	.tetxbox{
		width: 570px;
		height:400px;
		position:absolute;
		top: 50px;
		right:15%;
		font-size: 16px;
		color: #FFFFFF;
		text-align:justify;
	}
	.tadf{
		width: 350px;
		height: 160px;
		position:absolute;
		top: 150px;
		left:15%;
	}
	.rt{
		width: 100%;
		height: 522px;
		background: url('http://image.fast.126net.cn/group2/M00/02/4A/wKgADlybUveAbiX4AAERM9R-0vg079.jpg');
		background-size:100% 100%;
		background-repeat:no-repeat;
		position: relative;
	}
	.btns:hover{
		background:#000000;
		color: white;
	}
	.btns{
		width:148px;
		height:56px;
		margin:25px auto;
		border: 2px solid #333333;
		line-height: 54px;
		text-align: center;
		font-size: 16px;
	}
	.xiangf{
		/* border: 1px solid #000000; */
		  width:1100px;height:560px;margin:0 auto;margin-top:25px;
		  display:grid;
		  grid-template-columns: repeat(3, 1fr); /* 相当于 1fr 1fr 1fr */
		  grid-template-rows: repeat(2, 1fr); /* fr单位可以将容器分为几等份 */
		  grid-gap:2.2%; /* grid-column-gap 和 grid-row-gap的简写 */
		  grid-auto-flow: row;
	}
	.xiangs p{
		font-size:16px;
		color:#333333;
		line-height:28px;
		padding: 10px 0;
		text-align: center;
	}
	.xiangs video{
		width: 100%;
		height:210px;
	}
	.baba{
		width: 352px;
		height:262px;
		position:absolute;top:0;left:0;border:1px solid #ddd;
	}
	.xiangs{
		width: 350px;
		height:260px;
	}
	.fadd{
		width: 350px;
		height:260px;
		position: relative;
	}
	#zuo img:hover{
		background: rgba(0,0,0,.1);
	}
	#zuo{
		position: absolute;
		top:108px;
		left:10px;
	}
	#you img:hover{
		background: rgba(0,0,0,.1);
	}
	#you{
		position: absolute;
		top:108px;
		right:10px;
	}
	
	.zuos img{
		width: 35px;
		height: 100%;
	}
	.zuos{
		width: 27px;
		height: 44px;
	}
	
	.tadch{
		width: 260px;
		height: 260px;
		margin-right:15px;
		display: inline-block;
	}
	.da{
		height:260px;
		width: 1100px;
		scrollbar-width: none; /* firefox */
				-ms-overflow-style: none; /* IE 10+ */
				overflow-y: hidden;
				overflow-x: scroll;
				white-space: nowrap;
				text-align: left;
				margin: 0 auto;
	}
	.da::-webkit-scrollbar {
		  display: none;
     }
	.tabdda{
		width:100%;
		height:260px;
		position: relative;
	}
	.tadd{
		width:100%;
		height:296px;
		border-top: 2px solid #333333;
		border-bottom:2px solid #333333;
		padding: 15px 0;
	}
	.swiper-slide img{
		width: 100%;
		height: 100%;
		
		
	}
	.swiper-slide{
		width: 100%;
		height: 750px;
		overflow: hidden;
		text-align: center;
	}
	.swiper-container {
	    width: 100%;
	    height: 750px;
	}
	.swipbox{
		width: 100%;
		height: 800px;
		/*background-color: green;*/
		position: relative;
	}
</style>
